import 'package:flutter/material.dart';
import 'package:hrcapp/utils/theme_colors.dart';

class HeritageExhibitionScreen extends StatefulWidget {
  const HeritageExhibitionScreen({super.key});

  @override
  _HeritageExhibitionScreenState createState() => _HeritageExhibitionScreenState();
}

class _HeritageExhibitionScreenState extends State<HeritageExhibitionScreen> {
  final List<Map<String, dynamic>> _exhibitionModules = [
    {
      'title': '走近非遗',
      'icon': Icons.auto_stories,
      'color': const Color(0xFF8B4513),
      'description': '了解非遗文化的深厚底蕴',
    },
    {
      'title': '非遗资讯',
      'icon': Icons.newspaper,
      'color': const Color(0xFF4682B4),
      'description': '最新非遗动态与资讯',
    },
    {
      'title': '精彩活动',
      'icon': Icons.celebration,
      'color': const Color(0xFFFF6347),
      'description': '参与丰富多彩的非遗活动',
    },
    {
      'title': '探访非遗馆',
      'icon': Icons.museum,
      'color': const Color(0xFF32CD32),
      'description': '线上参观非遗展览馆',
    },
    {
      'title': '探访传习所',
      'icon': Icons.school,
      'color': const Color(0xFFFF8C00),
      'description': '体验非遗技艺传承',
    },
    {
      'title': '舌尖非遗',
      'icon': Icons.restaurant,
      'color': const Color(0xFFDC143C),
      'description': '品味传统美食文化',
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text(
          '非遗大厅',
          style: TextStyle(
            color: Colors.white,
            fontSize: 18,
            fontWeight: FontWeight.bold,
          ),
        ),
        backgroundColor: ThemeColors.primary,
        elevation: 0,
        centerTitle: true,
        leading: IconButton(
          icon: const Icon(Icons.arrow_back_ios, size: 16, color: Colors.white),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
        actions: [
          IconButton(
            icon: const Icon(Icons.search, size: 20, color: Colors.white),
            onPressed: () {
              // 搜索功能
            },
          ),
          const SizedBox(width: 8),
        ],
      ),
      body: SafeArea(
        child: SingleChildScrollView(
          child: Column(
            children: [
              // 顶部横幅
              _buildHeaderBanner(),
              
              // 功能模块网格
              _buildModuleGrid(),
              
              // 推荐内容
              _buildRecommendedContent(),
            ],
          ),
        ),
      ),
    );
  }

  // 构建顶部横幅
  Widget _buildHeaderBanner() {
    return Container(
      height: 200,
      margin: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(16),
        gradient: LinearGradient(
          begin: Alignment.topLeft,
          end: Alignment.bottomRight,
          colors: [
            ThemeColors.primary.withOpacity(0.8),
            ThemeColors.secondary.withOpacity(0.6),
          ],
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.1),
            blurRadius: 10,
            offset: const Offset(0, 4),
          ),
        ],
      ),
      child: Stack(
        children: [
          // 背景装饰
          Positioned(
            right: -20,
            top: -20,
            child: Container(
              width: 120,
              height: 120,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white.withOpacity(0.1),
              ),
            ),
          ),
          Positioned(
            left: -30,
            bottom: -30,
            child: Container(
              width: 80,
              height: 80,
              decoration: BoxDecoration(
                shape: BoxShape.circle,
                color: Colors.white.withOpacity(0.05),
              ),
            ),
          ),
          // 内容
          Padding(
            padding: const EdgeInsets.all(24),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                const Icon(
                  Icons.account_balance,
                  size: 48,
                  color: Colors.white,
                ),
                const SizedBox(height: 16),
                const Text(
                  '中华非遗文化大厅',
                  style: TextStyle(
                    fontSize: 24,
                    fontWeight: FontWeight.bold,
                    color: Colors.white,
                  ),
                ),
                const SizedBox(height: 8),
                Text(
                  '传承千年文化，弘扬民族精神',
                  style: TextStyle(
                    fontSize: 16,
                    color: Colors.white.withOpacity(0.9),
                  ),
                ),
              ],
            ),
          ),
        ],
      ),
    );
  }

  // 构建功能模块网格
  Widget _buildModuleGrid() {
    return Container(
      padding: const EdgeInsets.symmetric(horizontal: 16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '探索非遗世界',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: ThemeColors.textPrimary,
            ),
          ),
          const SizedBox(height: 16),
          GridView.builder(
            shrinkWrap: true,
            physics: const NeverScrollableScrollPhysics(),
            gridDelegate: const SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: 2,
              childAspectRatio: 1.2,
              crossAxisSpacing: 12,
              mainAxisSpacing: 12,
            ),
            itemCount: _exhibitionModules.length,
            itemBuilder: (context, index) {
              final module = _exhibitionModules[index];
              return _buildModuleCard(module);
            },
          ),
        ],
      ),
    );
  }

  // 构建单个模块卡片
  Widget _buildModuleCard(Map<String, dynamic> module) {
    return GestureDetector(
      onTap: () {
        _handleModuleTap(module['title']);
      },
      child: Container(
        decoration: BoxDecoration(
          color: Colors.white,
          borderRadius: BorderRadius.circular(16),
          boxShadow: [
            BoxShadow(
              color: Colors.black.withOpacity(0.05),
              blurRadius: 8,
              offset: const Offset(0, 2),
            ),
          ],
        ),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              width: 60,
              height: 60,
              decoration: BoxDecoration(
                color: module['color'].withOpacity(0.1),
                shape: BoxShape.circle,
              ),
              child: Icon(
                module['icon'],
                size: 30,
                color: module['color'],
              ),
            ),
            const SizedBox(height: 12),
            Text(
              module['title'],
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.bold,
                color: ThemeColors.textPrimary,
              ),
            ),
            const SizedBox(height: 4),
            Padding(
              padding: const EdgeInsets.symmetric(horizontal: 12),
              child: Text(
                module['description'],
                textAlign: TextAlign.center,
                style: TextStyle(
                  fontSize: 12,
                  color: ThemeColors.textSecondary,
                ),
                maxLines: 2,
                overflow: TextOverflow.ellipsis,
              ),
            ),
          ],
        ),
      ),
    );
  }

  // 构建推荐内容
  Widget _buildRecommendedContent() {
    return Container(
      margin: const EdgeInsets.all(16),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            '精选推荐',
            style: TextStyle(
              fontSize: 20,
              fontWeight: FontWeight.bold,
              color: ThemeColors.textPrimary,
            ),
          ),
          const SizedBox(height: 16),
          _buildRecommendedCard(
            '苏州刺绣艺术展',
            '体验千年刺绣技艺的精湛工艺',
            Icons.palette,
            const Color(0xFF9C27B0),
          ),
          const SizedBox(height: 12),
          _buildRecommendedCard(
            '景德镇陶瓷文化',
            '探索中国陶瓷艺术的博大精深',
            Icons.local_florist,
            const Color(0xFF795548),
          ),
          const SizedBox(height: 12),
          _buildRecommendedCard(
            '京剧脸谱艺术',
            '了解国粹京剧的文化内涵',
            Icons.theater_comedy,
            const Color(0xFFE91E63),
          ),
        ],
      ),
    );
  }

  // 构建推荐卡片
  Widget _buildRecommendedCard(String title, String description, IconData icon, Color color) {
    return Container(
      padding: const EdgeInsets.all(16),
      decoration: BoxDecoration(
        color: Colors.white,
        borderRadius: BorderRadius.circular(12),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(0.05),
            blurRadius: 6,
            offset: const Offset(0, 2),
          ),
        ],
      ),
      child: Row(
        children: [
          Container(
            width: 50,
            height: 50,
            decoration: BoxDecoration(
              color: color.withOpacity(0.1),
              borderRadius: BorderRadius.circular(12),
            ),
            child: Icon(
              icon,
              size: 24,
              color: color,
            ),
          ),
          const SizedBox(width: 16),
          Expanded(
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                Text(
                  title,
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: ThemeColors.textPrimary,
                  ),
                ),
                const SizedBox(height: 4),
                Text(
                  description,
                  style: TextStyle(
                    fontSize: 14,
                    color: ThemeColors.textSecondary,
                  ),
                ),
              ],
            ),
          ),
          Icon(
            Icons.arrow_forward_ios,
            size: 16,
            color: ThemeColors.textSecondary,
          ),
        ],
      ),
    );
  }

  // 处理模块点击事件
  void _handleModuleTap(String moduleTitle) {
    ScaffoldMessenger.of(context).showSnackBar(
      SnackBar(
        content: Text('点击了：$moduleTitle'),
        duration: const Duration(seconds: 2),
      ),
    );
  }
}